<template>
  <div
    v-if="this.currentmenu=='wuhai_Pollution_qy'"
    style="height: 100%;"
  >
    <div class="grid-R1">

    </div>
    <div class="grid-R2">

    </div>
    <div class="grid-R3">

    </div>
  </div>
  <div
    v-else-if="this.currentmenu=='wuhai_IR'"
    style="height: 100%;"
  >
    <div class="grid-R4">
      <div
        id="grid-R6"
        style="height:100%;padding:10px"
      ></div>
    </div>
    <div class="grid-R5">
      <div
        id="grid-R7"
        style="height:100%;padding:10px"
      ></div>
    </div>
  </div>
  <div
    v-else
    style="height: 100%;"
  >
    <!--初始图表，显示乌海三个点的污染数据-->
    <div class="grid-R4">
      <div style="text-align: center;height: 15%;">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            @click="reloadR4Charts('now')"
          >24小时变化</el-button>
          <el-button
            type="primary"
            @click="reloadR4Charts('history')"
          >历史变化<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
      </div>
      <div
        id="grid-R4"
        style="height:85%"
      >

      </div>
    </div>
    <div class="grid-R5">
      <div
        id="grid-R5"
        style="height:100%;padding:10px"
      ></div>
    </div>
  </div>

</template>
<script>
import whjson from './wuhai.json';
import commonOper from '../../scripts/commonOper.js';
var _array = require('lodash/array');
var _forEach = require('lodash/foreach');
export default {
  name: 'gridright',
  //   props: {
  //     options: {
  //       type: Object,
  //       default: () => {}
  //     }
  //   },
  data() {
    return {
      //当前选中的数据菜单
      currentmenu: '',
      r4Charts: null,
      r5Charts: null,
      r4data: null,
      r4Options: {
        color: ['#9cc700'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          selected: {},
          textStyle: {
            color: '#fff'
          },
          data: []
        },
        grid: {
          //show: true,
          borderColor: '#067abf',
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        dataZoom: [
          {
            startValue: ''
          },
          {
            type: 'inside'
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#067abf'
            }
          },
          axisLabel: {
            color: '#ffff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#5b9bff']
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#ffff'
          },
          axisLine: {
            lineStyle: {
              color: '#067abf'
            }
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#5b9bff']
            }
          }
        },
        series: []
      }
    };
  },
  created() {
    this.lazyLoad('');
  },

  methods: {
    //初始化默认图表，r4,r5
    initCharts(menu) {
      if (menu == 'wuhai_IR') {
        //初始化热红外图表
        let Options = {
          color: ['#fa9022'],
          title: {
            text: '',
            subtext: '',
            x: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            x:'right',
            textStyle: {
              color: '#fff'
            },
            data: []
          },
          grid: {
            //show: true,
            borderColor: '#067abf',
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
          },
          dataZoom: [
            {
              startValue: ''
            },
            {
              type: 'inside'
            }
          ],
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#067abf'
              }
            },
            axisLabel: {
              color: '#ffff'
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#5b9bff']
              }
            },
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: '#ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#067abf'
              }
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#5b9bff']
              }
            }
          },
          series: []
        };
        let r6 = this.$echarts.init(document.getElementById('grid-R6'));
        Options.title.text='乌海热红外面积历年变化';
        Options.title.subtext='来源于热红外影像';
        Options.legend.data=['面积'];
        Options.dataZoom.startValue='1988';
        Options.xAxis.data=['1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'];
        Options.series=[{
          name:'面积',
          type:'line',
          stack: '',
          data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,33,55,66]
        }];

        r6.setOption(Options);
        window.onresize = r6.resize;
        let r7 = this.$echarts.init(document.getElementById('grid-R7'));
        Options.title.text='乌海历年重污染天数';
        Options.title.subtext='来源于数据清洗';
        Options.legend.data=['污染天数'];
        Options.dataZoom.startValue='1988';
        Options.xAxis.data=['1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'];
        Options.series=[{
          name:'污染天数',
          type:'bar',
          stack: '',
          data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,33,55,66]
        }];

        r7.setOption(Options);
        window.onresize = r7.resize;
      } else {
        
        this.r4Charts = this.$echarts.init(document.getElementById('grid-R4'));
        //this.r5Charts = this.$echarts.init(document.getElementById("grid-R5"));

        this.r4Charts.showLoading();
        //this.r5Charts.showLoading();

        let params = {
          this: this,
          url: 'http://localhost:8080/msdemo/aqi-wuhai.json',
          data: {},
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          //cookieValue: cookieValue,
          successFunc: function(request) {
            //获取数据后，隐藏loading动画
            this.r4Charts.hideLoading();
            var json = eval('(' + request.data + ')');
            this.r4data = json;
            //图例数据
            let lengeddata = [];
            //数据
            let seriesdata = [];
            //x轴数据
            let xdata = [];
            // 显示的数据
            let selectedlenged = {};
            _forEach(this.r4data.hour24, function(item) {
              lengeddata.push(item.name);
              selectedlenged[item.name] = false;

              let serdata = [];
              _forEach(item.value, function(it) {
                xdata.push(it[0]);
                serdata.push(it[1]);
              });

              seriesdata.push({
                name: item.name,
                type: 'line',
                stack: '',
                data: serdata
              });
            });
            selectedlenged[lengeddata[0]] = true;
            this.r4Options.legend.selected = selectedlenged;
            this.r4Options.legend.data = lengeddata;
            this.r4Options.xAxis.data = _array.uniq(xdata);
            this.r4Options.dataZoom.startValue = this.r4Options.xAxis.data[0];
            this.r4Options.series = seriesdata;
            this.r4Charts.setOption(this.r4Options);
            window.onresize = this.r4Charts;
          }
        };
        commonOper.HttpPost(params);

        let r5Options = {
          //backgroundColor: '#404a59',
          title: {
            text: '乌海实时空气质量数据',
            subtext: '来源于实时数据清洗',
            x: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return params.name + ' : ' + params.value[2];
            }
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5', 'aqi'],
            textStyle: {
              color: '#fff'
            }
          },
          visualMap: {
            min: 0,
            max: 200,
            calculable: true,
            inRange: {
              color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
              color: '#fff'
            }
          },
          geo: {
            map: 'wuhai',
            //   label: {
            //     emphasis: {
            //       show: false
            //     }
            //   },
            center: [106.8219, 39.6719],
            zoom: 10,
            roam: true,
            label: {
              show: true,
              color: '#fff'
            },
            emphasis: {
              label: {
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },
          series: [
            {
              name: 'pm2.5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: [
                { name: '聚英学校', value: [106.8219, 39.6719, 9] },
                { name: '市林业局', value: [106.8089, 39.6969, 12] },
                { name: '中海勃湾学校', value: [106.7931, 39.6572, 62] }
              ],
              symbolSize: function() {
                return 20;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        };
        let r5 = this.$echarts.init(document.getElementById('grid-R5'));
        r5.setOption(r5Options);
        window.onresize = r5.resize;
      }
    },
    lazyLoad(item) {
      this.currentmenu = item;
      setTimeout(() => {
        this.initCharts(item);
      }, 500);
    },
    reloadR4Charts(type) {
      let localdata = [];
      if (type == 'now') {
        localdata = this.r4data.hour24;
      }
      if (type == 'history') {
        localdata = this.r4data.alldays;
      }
      //图例数据
      let lengeddata = [];
      //数据
      let seriesdata = [];
      //x轴数据
      let xdata = [];
      // 显示的数据
      let selectedlenged = {};
      _forEach(localdata, function(item) {
        lengeddata.push(item.name);
        selectedlenged[item.name] = false;

        let serdata = [];
        _forEach(item.value, function(it) {
          xdata.push(it[0]);
          serdata.push(it[1]);
        });

        seriesdata.push({
          name: item.name,
          type: 'line',
          stack: '',
          data: serdata
        });
      });
      selectedlenged[lengeddata[0]] = true;
      this.r4Options.legend.selected = selectedlenged;
      this.r4Options.legend.data = lengeddata;
      this.r4Options.xAxis.data = _array.uniq(xdata);
      this.r4Options.dataZoom.startValue = this.r4Options.xAxis.data[0];
      this.r4Options.series = seriesdata;
      this.r4Charts.setOption(this.r4Options, true);
    }
  },
  mounted(){

    this.$echarts.registerMap('wuhai', whjson);
  },
  // watch: {
  //   options() {
  //     this.initOption = this.options;
  //   }
  // }
};
</script>

